﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>中南大学自动化学院模型管理平台</title>
    <link rel="icon" type="image/x-icon" href="./favicon.ico" />
    <script type="text/javascript">
        // 检测浏览器版本
        (function () {
            var version = ieVer();
            if (version < 9) {
                location.href = "./static/version.html";
            }
            function ieVer() {
                var userAgent = navigator.userAgent;
                var isOpera = userAgent.indexOf("Opera") > -1;
                var isIE =
                    userAgent.indexOf("compatible") > -1 &&
                    userAgent.indexOf("MSIE") > -1 &&
                    !isOpera;
                if (isIE) {
                    var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
                    reIE.test(userAgent);
                    var IEVersion = parseFloat(RegExp["$1"]);
                    return Math.floor(IEVersion);
                }

                return Infinity;
            }
        })();
    </script>
    <link type="text/css" rel="stylesheet" href="./css/reset.css" />
    <link type="text/css" rel="stylesheet" href="./css/bootstrap.min.css" />
    <link type="text/css" rel="stylesheet" href="./css/folder.css" />
    <script>
        var now = new Date().getTime();
        document.write(
            '<link href="./css/index2.css?v=' +
            now +
            '" rel="stylesheet" type="text/css"/>'
        );
    </script>
    <script type="text/javascript" src="./js/jquery.1.10.2.js"></script>
    <script type="text/javascript" src="../Scripts/bootstrap.min.js"></script>
    <script type="text/javascript" src="./js/vue.min.2.5.13.js"></script>
    <script src="./js/folder.js"></script>
    <script src="./js/utils.js"></script>
</head>
<body style="background-color: #f9f9f9;">
    <div id="app">
        <template>
            <div id="top">
                <div class="wid">
                    <div id="logo">
                        <a href="./index.html"></a>
                        <h1>
                            <a href="./index.html" style="font-size: 21px;">自动化学院模型管理平台</a>
                        </h1>
                    </div>
                    <div id="nav">
                        <ul>
                            <li>
                                <img src="./images/yishoulu.png" alt="" class="left" />
                                <div class="right">
                                    <span class="num">{{statistics.projectSum}}</span><span class="name">已收录数据</span>
                                </div>
                            </li>
                            <li>
                                <img src="./images/shuju.png" alt="" class="left" />
                                <div class="right">
                                    <span class="num">{{statistics.todaySum}}</span><span class="name">今日收录</span>
                                </div>
                            </li>
                            <li>
                                <img src="./images/chaxun.png" alt="" class="left" />
                                <div class="right">
                                    <span class="num">{{statistics.browseSum}}</span><span class="name">总浏览量</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div id="logoright">
                        <div id="nologinbox" v-if="!userName">
                            <a href="./login.html" class="on" rel="nofollow">登录</a><span>|</span><a href="./reg.html" rel="nofollow">注册</a>
                        </div>
                        <div id="nologinbox" v-else>
                            <span>{{userName}}</span>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
            <div id="main">
                <div id="topcrumb" class="wid">
                    <div class="topcrum-box">
                        <a href="/code/index.html">首页</a>
                        <span></span>
                        <a href="/code/folders.html">项目总览</a>
                        <span></span>
                        <p style="display: inline">{{folderData.name}}</p>
                    </div>
                </div>
                <span style="float: right; margin-right: 10px; cursor: pointer;"
                      @click="handleAddNewProjectClick">新增模型</span>
                <input 
                       v-if="editing.Name"
                       v-model="folderData.Name"
                       @blur="handleUpdateFolderData('Name')"/>
                <h3 v-else style="cursor: pointer;" @click="editing.Name = true">{{folderData.Name}}</h3>
                <textarea
                          v-if="editing.Description"
                          v-model="folderData.Description"  
                          @blur="handleUpdateFolderData('Description')"/></textarea>
                <p v-else 
                   style="cursor: pointer;" 
                   class="vertical-padding-5"
                   @click="editing.Description = true">{{folderData.Description}}</p>
                <p class="vertical-padding-5">创建时间：{{folderData.create_time}}</p>
                <span style="float: right; margin-right: 10px; cursor: pointer; color: red;"
                      @click="handleFolderDelete">删除</span>
                <p class="vertical-padding-5">更新时间：{{folderData.modify_time}}</p>
                <div v-for="project in folderProjects" class="project-collapse">
                    <div @click="handleProjectCollapseClick(project.id)" class="trigger">
                        <img v-if="currCollapse != project.id" style="float: right;" src="images/down-arrow.png" />
                        <img v-else style="float: right;" src="images/up-arrow.png" />
                        <h3>{{project.name}}</h3>
                    </div>
                    <div :id="project.id" class="collapse">
                        <p>{{project.description}}</p>
                        <div>
                            <span><b>请求地址</b></span>
                            <div class="right">
                                <p>{{project.Project_Url}}</p>
                            </div>
                        </div>
                        <div>
                            <span><b>请求格式</b></span>
                            <div class="right">
                                <p>{{project.ProjectKey}}</p>
                            </div>
                        </div>
                        <div>
                            <span><b>输入格式</b></span>
                            <div class="right">
                                <p>{{project.Input || '-'}}</p>
                            </div>
                        </div>
                        <div>
                            <span><b>输出格式</b></span>
                            <div class="right">
                                <p>{{project.Output || '-'}}</p>
                            </div>
                        </div>
                        <span style="float: right; margin-right: 10px; cursor: pointer; color: red;"
                              @click="handleProjectDelete(project)">删除</span>
                    </div>
                </div>
                <div class="mtop10" id="pageline" v-if="folderProjects.length > 0">
                    <a class="pprev" v-if="cur>1" @click="cur--,pageClick()">上一页</a>
                    <span class="pprev" v-if="cur==1">上一页</span>
                    <a v-for="index in indexs" :class="{ 'current': cur == index}" @click="btnClick(index)">{{index}}</a>
                    <a v-if="cur!=allNum" @click="cur++,pageClick()" class="pprev">下一页</a>
                    <span class="pprev" v-if="cur == allNum">下一页</span>
                </div>
            </div>
            <div id="addNewProjectModal" class="modal fade" tabindex="-1" role="dialog">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button 
                                    type="button"
                                    class="close"
                                    data-dismiss="modal"
                                    aria-label="Close"
                                    @click="handleAddNewProjectModalClose">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <h4>新增模板</h4>
                        </div>
                        <div class="modal-body">
                            <div class="left content-block">
                                <div class="input-group" style="width: 300px;">
                                    <input type="text" class="form-control" placeholder="请输入关键字...">
                                    <span class="input-group-btn">
                                        <button class="btn btn-default" type="button">搜索</button>
                                    </span>
                                </div>
                                <div>
                                    <div v-for="item in projects.data"
                                         :class="projectBoxClass(item.Project_Id)"
                                         :key="item.Project_Id"
                                         @click="handleProjectBoxClick(item.Project_Id)">
                                        <div class="content">
                                            <h4>{{item.Project_Name}}</h4>
                                            <p>{{item.Project_Description}}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="mtop10" id="pageline">
                                    <a class="pprev" v-if="projects.currPage>1" @click="projects.currPage--,projectsPageClick()">上一页</a>
                                    <span class="pprev" v-if="projects.currPage==1">上一页</span>
                                    <a 
                                       v-for="index in projectsIndexs"
                                       :class="{ 'current': projects.currPage == index}"
                                       @click="projectBtnClick(index)"
                                       style="cursor: pointer">{{index}}</a>
                                    <a v-if="projects.currPage != projects.totalPages" @click="projects.currPage++,projectsPageClick()" class="pnext">下一页</a>
                                    <span class="pprev" v-if="projects.currPage == projects.totalPages">下一页</span>
                                </div>
                            </div>
                            <div class="right content-block">
                                <p>已选模型</p>
                                <hr />
                                <div v-for="item in selectedProjects.current" class="selected-project-box">
                                    <div class="content">
                                        <img
                                             style="float: right; cursor: pointer;"
                                             width="12"
                                             src="images/cancel.png"
                                             @click="handleProjectBoxClick(item.id)"/>
                                        <p>{{item.name}}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" @click="handleAddNewProjectModalClose">取消</button>
                            <button
                                    id="addNewProjectModalConfirmButton"
                                    type="button"
                                    class="btn btn-primary"
                                    @click="handleAddNewProjectModalConfirm">确定</button>
                        </div>
                    </div>
                </div>
            </div>
        </template>
    </div>
    <script src="./js/widget.js"></script>
    <div class="wid" id="foot2">
        <div class="wid2">
            <p class="clear mtop15 mcenter">
                © 2020-
                <script>
          var year = new Date().getFullYear();
          document.write(year);
                </script> <a href="http://soa.csu.edu.cn/" target="_blank" style="color:#999;display: inline;">中南大学自动化学院</a> 版权所有 <span>
                    <a href="http://www.beian.miit.gov.cn" target="_blank" style="color:#999;display: inline;">湘ICP备05005659号-1 </a>　湘教QS3-200505-000204
                </span>
            </p>
        </div>
    </div>
</body>
</html>